<!DOCTYPE html SYSTEM "http://www.thymeleaf.org/dtd/xhtml1-strict-thymeleaf-spring4-4.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>Mr.Rainbow·登陆</title>
    <link rel="stylesheet" th:href="@{/static/desk/layui/css/layui.css}" media="all"/>
    <link rel="stylesheet" th:href="@{/static/desk/css/login.css}" media="all"/>
    <style>
        /* 覆盖原框架样式 */
        .layui-elem-quote {
            background-color: inherit !important;
        }

        .layui-input, .layui-select, .layui-textarea {
            background-color: inherit;
            padding-left: 30px;
        }
    </style>
</head>
<body>
<!-- Head -->
<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-sm12 layui-col-md12 zyl_mar_01">
            <blockquote class="layui-elem-quote">Mr.Mo·云易校园论坛登陆界面</blockquote>
        </div>
    </div>
</div>
<!-- Head End -->

<!-- Carousel -->
<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md12">
        <div class="layui-carousel zyl_login_height" id="zyllogin" lay-filter="zyllogin">
            <div carousel-item="">
                <div>
                    <div class="zyl_login_cont"></div>
                </div>
                <div>
                    <img th:src="@{/static/desk/image/carousel/01.jpg}"/>
                </div>
                <div>
                    <div class="background">
                        <span></span><span></span><span></span>
                        <span></span><span></span><span></span>
                        <span></span><span></span><span></span>
                        <span></span><span></span><span></span>
                    </div>
                </div>
                <div>
                    <img th:src="@{/static/desk/image/carousel/03.jpg}"/>
                </div>
            </div>
        </div>
    </div>
</div>
<!-- Carousel End -->

<!-- Footer -->
<div class="layui-row">
    <div class="layui-col-sm12 layui-col-md12 zyl_center zyl_mar_01">
        © 2021 云易校园论坛
    </div>
</div>
<!-- Footer End -->


<!-- LoginForm -->
<div class="zyl_lofo_main">
    <fieldset class="layui-elem-field layui-field-title zyl_mar_02">
        <legend>欢迎登陆 - 云易校园论坛</legend>
    </fieldset>
    <div class="layui-row layui-col-space15">
        <form class="layui-form zyl_pad_01" th:action="@{/login}" method="post">
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <input type="text" th:value="${param.userName}" id="userName" name="userName" lay-verify="required|userName" autocomplete="off"
                           placeholder="QQ邮箱账号" class="layui-input">
                    <i class="layui-icon layui-icon-username zyl_lofo_icon"></i>
                </div>
                <span style="color: red;font-size: 12px" th:text="${usernameMsg}"></span>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-form-item">
                    <input type="password" th:value="${param.password}" id="password" name="password" lay-verify="required|pass" autocomplete="off" placeholder="密码"
                           class="layui-input">
                    <i class="layui-icon layui-icon-password zyl_lofo_icon"></i>
                </div>
                <span style="color: red;font-size: 12px" th:text="${passwordMsg}"></span>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <div class="layui-row">
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
                        <div class="layui-form-item">
                            <input type="text" lay-verify="required|vercodes" id="code" name="code"
                                   autocomplete="off" placeholder="验证码" class="layui-input" maxlength="4">
                            <i class="layui-icon layui-icon-vercode zyl_lofo_icon"></i>
                        </div>
                        <span style="color: red;font-size: 12px;" th:text="${codeMsg}"></span>
                    </div>
                    <div class="layui-col-xs4 layui-col-sm4 layui-col-md4">
<!--                        <div class="zyl_lofo_vercode zylVerCode">-->
                            <img style="cursor:pointer" th:title="点击刷新验证码" id="kaptcha" th:src="@{/kaptcha}"
                                 onclick="changeVerificationCode()"/>
<!--                        </div>-->
                    </div>
                </div>
            </div>
            <div class="layui-col-sm12 layui-col-md12">
                <button id="loginBtn" class="layui-btn layui-btn-fluid" lay-submit="" lay-filter="demo1">立即登录</button>
            </div>
        </form>
    </div>
</div>
<!-- LoginForm End -->


<!-- Jquery Js -->
<script th:src="@{/static/js/jquery-3.5.1.js}"></script>
<!-- Layui Js -->
<script th:src="@{/static/desk/layui/layui.js}"></script>
<!-- Jqarticle Js -->
<script type="text/javascript" th:src="@{/static/desk/assembly/jqarticle/jparticle.min.js}"></script>
<!-- ZylVerificationCode Js-->
<script type="text/javascript" th:src="@{/static/desk/assembly/zylVerificationCode/zylVerificationCode.js}"></script>
<script>
    var layer;

    function layuiAlert(content, time) {
        layui.use('layer', function () {
            var layer = layui.layer;
            layer.alert(content, {icon: 5, time: time});
        });
    }
    $('#loginBtn').click(function () {
        if ($.trim($("#userName").val()).length == 0) {
            layuiAlert('账号不能为空！！！', 2000);
            return;
        }
        if ($.trim($("#password").val()).length == 0) {
            layuiAlert('密码不能为空！！！', 2000);
            return;
        }

        $("#loginForm").submit();


    })
    $("#userName").blur(function () {
        var reg = /^[1-9]\d{4,10}(@qq.com)+$/;
        if (!reg.test($.trim($("#userName").val())) && $.trim($("#userName").val()).length != 0) {
            layuiAlert('输入的QQ邮箱账号格式不对！！！', 2000);
            return false;
        }
    })

    function changeVerificationCode() {
        var path = "/kaptcha?p=" + Math.random();
        $("#kaptcha").attr("src", path);
    }
    layui.use(['carousel', 'form','layer'], function () {
        var carousel = layui.carousel
            , form = layui.form;

        layer = layui.layer;


        //设置轮播主体高度
        var zyl_login_height = $(window).height() / 1.3;
        var zyl_car_height = $(".zyl_login_height").css("cssText", "height:" + zyl_login_height + "px!important");


        //Login轮播主体
        carousel.render({
            elem: '#zyllogin'//指向容器选择器
            , width: '100%' //设置容器宽度
            , height: 'zyl_car_height'
            , arrow: 'always' //始终显示箭头
            , anim: 'fade' //切换动画方式
            , autoplay: true //是否自动切换false true
            , arrow: 'hover' //切换箭头默认显示状态||不显示：none||悬停显示：hover||始终显示：always
            , indicator: 'none' //指示器位置||外部：outside||内部：inside||不显示：none
            , interval: '5000' //自动切换时间:单位：ms（毫秒）
        });

        //监听轮播--案例暂未使用
        carousel.on('change(zyllogin)', function (obj) {
            var loginCarousel = obj.index;
        });

        //粒子线条
        $(".zyl_login_cont").jParticle({
            background: "rgba(0,0,0,0)",//背景颜色
            color: "#fff",//粒子和连线的颜色
            particlesNumber: 100,//粒子数量
            //disableLinks:true,//禁止粒子间连线
            //disableMouse:true,//禁止粒子间连线(鼠标)
            particle: {
                minSize: 1,//最小粒子
                maxSize: 3,//最大粒子
                speed: 30,//粒子的动画速度
            }
        });

    });

</script>
</body>
</html>
